<!DOCTYPE html>
<html
  lang="zh"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
  <head>
    <th:block th:include="include :: header('修改江大制度')" />
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: summernote-css" />
    <style>
      .form-group .control-label {
        font-weight: bold;
      }
      .content-type-selector {
        margin-bottom: 15px;
      }
      .content-section {
        display: none;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-bottom: 20px;
      }
      .content-section.active {
        display: block;
      }
      .upload-area {
        border: 2px dashed #ccc;
        border-radius: 4px;
        padding: 20px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s;
      }
      .upload-area:hover {
        border-color: #c52222;
        background-color: #f9f9f9;
      }
      .upload-area i {
        font-size: 48px;
        color: #c52222;
        margin-bottom: 10px;
      }
      .file-info {
        margin-top: 10px;
        font-size: 14px;
        color: #666;
      }
      .current-file {
        background-color: #f0f0f0;
        padding: 10px;
        border-radius: 4px;
        margin-top: 10px;
      }
    </style>
  </head>
  <body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
      <div class="row">
        <div class="col-sm-12">
          <div class="ibox float-e-margins">
            <div class="ibox-title">
              <h5>修改江大制度</h5>
            </div>
            <div class="ibox-content">
              <form
                class="form-horizontal m"
                id="form-dangnei-edit"
                th:object="${commonCms}"
              >
                <input name="id" th:field="*{id}" type="hidden" />

                <div class="form-group">
                  <label class="col-sm-2 control-label">制度标题：</label>
                  <div class="col-sm-10">
                    <input
                      name="title"
                      th:field="*{title}"
                      class="form-control"
                      type="text"
                      required
                    />
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-2 control-label">是否公开：</label>
                  <div class="col-sm-10">
                    <input
                      name="ifPublic"
                      type="radio"
                      th:value="0"
                      th:field="*{ifPublic}"
                    />
                    <label>不公开</label>
                    <input
                      name="ifPublic"
                      type="radio"
                      th:value="1"
                      th:field="*{ifPublic}"
                    />
                    <label>公开</label>
                  </div>
                </div>
                <div class="form-group content-type-selector">
                  <label class="col-sm-2 control-label">内容类型：</label>
                  <div class="col-sm-10">
                    <select
                      name="contentType"
                      class="form-control"
                      id="contentType"
                      th:field="*{contentType}"
                    >
                      <option value="text">文字内容</option>
                      <option value="pdf">PDF文件</option>
                      <option value="image">图片文件</option>
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-2 control-label">摘要：</label>
                  <div class="col-sm-10">
                    <textarea
                      name="remark"
                      th:field="*{remark}"
                      class="form-control"
                      rows="3"
                    ></textarea>
                  </div>
                </div>
                <!-- 文字内容区域 -->
                <div
                  id="text-content-section"
                  class="content-section"
                  th:classappend="${commonCms.contentType == 'text' ? 'active' : ''}"
                >
                  <div class="form-group">
                    <label class="col-sm-2 control-label">制度内容：</label>
                    <div class="col-sm-10">
                      <textarea
                        id="content"
                        name="content"
                        th:field="*{content}"
                        class="form-control"
                        rows="10"
                      ></textarea>
                    </div>
                  </div>
                </div>

                <!-- PDF上传区域 -->
                <div
                  id="pdf-content-section"
                  class="content-section"
                  th:classappend="${commonCms.contentType == 'pdf' ? 'active' : ''}"
                >
                  <div class="form-group">
                    <label class="col-sm-2 control-label">PDF文件：</label>
                    <div class="col-sm-10">
                      <div class="upload-area" id="pdf-upload-area">
                        <i class="fa fa-file-pdf-o"></i>
                        <div>点击选择或拖拽PDF文件到此处上传</div>
                        <div class="file-info">支持PDF格式文件</div>
                      </div>
                      <input
                        type="file"
                        id="pdfFile"
                        name="file"
                        accept=".pdf"
                        style="display: none"
                      />
                      <input
                        type="hidden"
                        name="filePath"
                        id="pdfFilePath"
                        th:field="*{filePath}"
                      />

                      <!-- 当前文件信息 -->
                      <div
                        th:if="${commonCms.contentType == 'pdf' and !#strings.isEmpty(commonCms.filePath)}"
                        class="current-file"
                      >
                        当前文件:
                        <a
                          th:href="@{${commonCms.filePath}}"
                          target="_blank"
                          th:text="${commonCms.filePath}"
                          >查看文件</a
                        >
                      </div>

                      <div
                        id="pdf-file-name"
                        class="file-info"
                        style="display: none"
                      ></div>
                    </div>
                  </div>
                </div>

                <!-- 图片上传区域 -->
                <div
                  id="image-content-section"
                  class="content-section"
                  th:classappend="${commonCms.contentType == 'image' ? 'active' : ''}"
                >
                  <div class="form-group">
                    <label class="col-sm-2 control-label">图片文件：</label>
                    <div class="col-sm-10">
                      <div class="upload-area" id="image-upload-area">
                        <i class="fa fa-file-image-o"></i>
                        <div>点击选择或拖拽图片文件到此处上传</div>
                        <div class="file-info">支持JPG、PNG格式图片</div>
                      </div>
                      <input
                        type="file"
                        id="imageFile"
                        name="file"
                        accept=".jpg,.jpeg,.png"
                        style="display: none"
                      />
                      <input
                        type="hidden"
                        name="filePath"
                        id="imageFilePath"
                        th:field="*{filePath}"
                      />

                      <!-- 当前文件信息 -->
                      <div
                        th:if="${commonCms.contentType == 'image' and !#strings.isEmpty(commonCms.filePath)}"
                        class="current-file"
                      >
                        当前文件:
                        <a
                          th:href="@{${commonCms.filePath}}"
                          target="_blank"
                          th:text="${commonCms.filePath}"
                          >查看文件</a
                        >
                      </div>

                      <div
                        id="image-file-name"
                        class="file-info"
                        style="display: none"
                      ></div>
                    </div>
                  </div>
                </div>

                <div class="hr-line-dashed"></div>
                <div class="form-group">
                  <div class="col-sm-12 text-center">
                    <button
                      type="button"
                      class="btn btn-primary"
                      onclick="submitHandler()"
                    >
                      <i class="fa fa-save"></i> 保存
                    </button>
                    <button
                      type="button"
                      class="btn btn-danger"
                      onclick="closeItem()"
                    >
                      <i class="fa fa-close"></i> 关闭
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    <th:block th:include="include :: footer" />
    <th:block th:include="include :: select2-js" />
    <th:block th:include="include :: summernote-js" />

    <script th:inline="javascript">
      var prefix = ctx + "hui/manage/jiangda";

      // 页面加载完成后根据内容类型显示对应区域
      $(document).ready(function () {
        var contentType = $("#contentType").val();
        $(".content-section").removeClass("active");
        $("#" + contentType + "-content-section").addClass("active");
      });
      $("#content").summernote({
        height: 200,
        lang: "zh-CN",
        toolbar: [
          ["style", ["style"]],
          ["font", ["bold", "underline", "clear"]],
          ["fontname", ["fontname"]],
          ["color", ["color"]],
          ["para", ["ul", "ol", "paragraph"]],
          ["table", ["table"]],
          ["insert", ["link", "picture"]],
          ["view", ["fullscreen", "codeview", "help"]],
        ],
      });
      // 内容类型切换
      $("#contentType").change(function () {
        var type = $(this).val();
        $(".content-section").removeClass("active");
        $("#" + type + "-content-section").addClass("active");
      });

      // PDF上传区域点击事件
      $("#pdf-upload-area").click(function () {
        $("#pdfFile").click();
      });

      // 图片上传区域点击事件
      $("#image-upload-area").click(function () {
        $("#imageFile").click();
      });

      // PDF文件选择事件
      $("#pdfFile").change(function () {
        var file = this.files[0];
        if (file) {
          $("#pdf-file-name")
            .text("已选择文件: " + file.name)
            .show();
          // 上传文件
          uploadFile(file, "pdfFilePath");
        }
      });

      // 图片文件选择事件
      $("#imageFile").change(function () {
        var file = this.files[0];
        if (file) {
          $("#image-file-name")
            .text("已选择文件: " + file.name)
            .show();
          // 上传文件
          uploadFile(file, "imageFilePath");
        }
      });

      // 上传文件函数
      function uploadFile(file, targetId) {
        var formData = new FormData();
        formData.append("file", file);

        $.ajax({
          url: ctx + "hui/manage/jiangda/upload",
          type: "POST",
          data: formData,
          cache: false,
          contentType: false,
          processData: false,
          dataType: "json",
          success: function (result) {
            if (result.code == web_status.SUCCESS) {
              $("#" + targetId).val(result.fileName);
              $.modal.msgSuccess("文件上传成功");
            } else {
              $.modal.msgError("文件上传失败：" + result.msg);
            }
          },
          error: function () {
            $.modal.msgError("文件上传异常");
          },
        });
      }

      // 表单验证
      $("#form-dangnei-edit").validate({
        rules: {
          title: {
            required: true,
            maxlength: 100,
          },
          content: {
            required: function () {
              return $("#contentType").val() === "text";
            },
          },
        },
        messages: {
          title: {
            required: "请输入制度标题",
            maxlength: "制度标题不能超过100个字符",
          },
          content: {
            required: "请输入制度内容",
          },
        },
        submitHandler: function (form) {
          edit();
        },
      });

      // 提交按钮点击事件
      function submitHandler() {
        if ($("#form-dangnei-edit").valid()) {
          edit();
        }
      }

      // 修改制度
      function edit() {
        var contentType = $("#contentType").val();
        var ifPublic = Number($('input[name="ifPublic"]:checked').val());
        var data = {};

        // 根据内容类型收集数据
        if (contentType === "text") {
          data = {
            id: $("input[name='id']").val(),
            title: $("input[name='title']").val(),
            contentType: contentType,
            ifPublic: ifPublic,
            content: $("textarea[name='content']").val(),
            remark: $("textarea[name='remark']").val(),
          };
        } else {
          var filePath =
            contentType === "pdf"
              ? $("#pdfFilePath").val()
              : $("#imageFilePath").val();
          // 如果没有新文件上传，保持原文件路径
          if (!filePath) {
            filePath =
              contentType === "pdf"
                ? $("#pdfFilePath").val()
                : $("#imageFilePath").val();
          }

          data = {
            id: $("input[name='id']").val(),
            title: $("input[name='title']").val(),
            contentType: contentType,
            filePath: filePath,

            ifPublic: ifPublic,
            remark: $("textarea[name='remark']").val(),
          };
        }

        $.operate.save(prefix + "/edit", data);
      }

      // 关闭页面
      function closeItem() {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
      }
    </script>
  </body>
</html>
